<template>
  <div class='product'>
    <!-- 第一行选择栏开始 -->
    <el-button class="btn1" type="primary" size="small" @click='showsHandler()'>添加</el-button>
      <el-input class='one'  v-model="input" placeholder="审批人" size="small"></el-input>
    <el-form ref="form" :model="list" label-width="80px">
  <el-form-item size="small" >
    <el-select v-model="list.status" placeholder="请选择状态"  class="two" >
      <el-option label="正常" value="正常"></el-option>
      <el-option label="下架" value="下架"></el-option>
    </el-select>
    <el-select v-model="list.name" placeholder="请选择栏目"  class="three" >
      <el-option label="家庭保洁" value="家庭保洁"></el-option>
      <el-option label="衣物护理" value="衣物护理"></el-option>
      <el-option label="母婴陪护" value="母婴陪护"></el-option>
      <el-option label="家居养护" value="家居养护"></el-option>
      <el-option label="家电清洗" value="家电清洗"></el-option>
      <el-option label="环境整治" value="环境整治"></el-option>
    </el-select>
    <el-button class="btn2" type="primary" size="small">查询</el-button>
  </el-form-item>
</el-form>
<!-- 第一行选择栏结束 -->
<!-- 表格开始 -->
 <el-table :data="products" style="width: 100%;font-size: 12px;">
      <el-table-column label="序号" type="index" align="center"></el-table-column>
      <el-table-column prop="id" label="产品编号" width='100px' ></el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        align="center"
          width="120">
      </el-table-column>
      <el-table-column
        label="图片" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <img width="100%" :src="scope.row.photo" alt="">
            <div slot="reference" class="name-wrapper">
              <img width="30px" :src="scope.row.photo" alt="">
            </div>
          </el-popover>
        </template>
      </el-table-column>
       <el-table-column label="价格" prop="price"  align="center" width='250px'>
       </el-table-column>
       <el-table-column label="状态" prop="status" align="center">
         <template slot-scope="scope">
          <el-tag
          size="mini"
            :type="scope.row.status === '正常' ? 'success' : scope.row.status === '下架' ? 'danger' : 'info'"
            disable-transitions>{{scope.row.status}}</el-tag>
        </template>
       </el-table-column>
      <el-table-column
        prop="category.name"
        label="所属栏目"
        align="center"
        width="300">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
       >
        <template slot-scope="scope">
          <el-button @click="editHandler(scope.row)" type="text" size="small">编辑</el-button>
          <el-button style="color:red;" @click="deleteHandler(scope.row.id)" type="text" size="small">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
<!-- 分页开始 -->
 <div class="pagination">
            <el-pagination 
             layout="prev, pager, next" 
              :page-size="list.pageSize" 
               :total="total" 
                @current-change='changeHandler'> 
            </el-pagination>
        </div>
<!-- 分页结束 -->
<!-- 模态框开始 -->
 <el-dialog :title='title' :visible.sync="dialogFormVisible">
    <!-- 表单开始 -->
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="产品名称" prop="name" required>
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="所属栏目" prop="productCategoryId" required>
    <el-select v-model="ruleForm.productCategoryId" placeholder="请选择所属栏目">
      <el-option label="家庭保洁" value="9442"></el-option>
      <el-option label="衣物护理" value="9441"></el-option>
      <el-option label="母婴陪护" value="9440"></el-option>
      <el-option label="家具养护" value="9439"></el-option>
      <el-option label="家电清洗" value="9438"></el-option>
      <el-option label="环境整治" value="9437"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="价格" prop="price" required>
    <el-input v-model="ruleForm.price"></el-input>
  </el-form-item>
   <el-form-item label="封面" prop="photo" required>
   <el-upload
  action="http://81.69.24.232/pet/jz_upload.php"
  list-type="picture-card"
  :on-success="successHandler"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
  </el-form-item>
  <el-form-item label="产品描述" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item size="large">
    <el-button type="primary" @click="submitHandler()">添加</el-button>
    <el-button @click="dialogFormVisible = false">取消</el-button>
  </el-form-item>
</el-form>
    <!-- 表单结束 -->
 </el-dialog>

<!-- 模态框结束 -->


  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
export default {
data() {
    return {
      input:'',
      list:{
        page:1,
        pageSize:6
      },
     dialogFormVisible:false,
      dialogImageUrl: '',
      dialogVisible: false,
      ruleForm:{
        
      },
       title:'添加栏目信息'

    }
  },
  computed:{
    ...mapState('product',['products', 'total'])
  },
  methods:{
     ...mapActions('product',['findAllProduct','saveProduct','deleteProduct']),
     //分页
    changeHandler(page){
      this.list.page = page
      this.findAllProduct(this.list)
    },
    //去添加栏目信息
    showsHandler(){
      this.ruleForm={}
      this.dialogFormVisible=true
      this.title='添加栏目信息'
    },
    //添加栏目信息
   submitHandler(){
     this.saveProduct(this.ruleForm).then(res=>{
       if(res.status == 200){
         this.dialogFormVisible=false,
         this.findAllProduct(this.list)
         this.$message({
           type:'success',
           message:res.message
         })
       }
       else{
          this.$message({
            type: 'error',
            message: res.message,
          })
        }
     })
   },
   //编辑栏目信息
      editHandler(data){
        //将当前行的内容赋值给rulerFrom
        this.ruleForm=data
        this.title='编辑栏目信息'
        this.dialogFormVisible=true
      },
      //删除栏目信息
      deleteHandler(id){
        let params ={
          id
        }
        this.deleteProduct(params).then(res=>{
          if(res.status==200){
            this.findAllProduct(this.list)
            this.$message({
              type:'success',
              message:res.message
            })
          }
          else{
            this.$message({
              type:'error',
              message:res.message
            })
          }
        })
      },
      //element所需方法
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //文件上传成功时
      successHandler(file){
        console.log(file);
        this.ruleForm.photo=file
      }

    },
  created(){
    console.log(this.list,'555555');
    this.findAllProduct(this.list)
  }
}
</script>

<style  scoped>
.btn1{
  float: left;
}
.btn2{
  margin-left:10px
}
 .one{
   float: left;
   width:200px;
   margin-left:10px;
 }
 .two{
   margin-left:10px;
 }
 .three{
   margin-left:10px;
 }
 .pagination{
   float: right
 }
</style>